<template>

  <el-form ref="form" :model="formData" label-width="100px">
    <div class="from-dynamic">
      <div
        v-for="(field, index) in fields"
        :key="index"
        class="form-item-dynamic"
      >
        <el-form-item
          :key="index"
          :label="field.label"
          :prop="field.prop"
        >
          <component
            :is="getComponentConfig(field.type).component"
            v-model="formData[field.prop]"
            :change="field.method?field.method(formData):''"
            v-bind="getComponentProps(field)"
            v-on="getComponentEvents(field)"
          >
            <template v-for="(child, index) in getComponentChildren(field)">
              <component
                :is="child.component"
                v-bind="child.props"
              >
                {{ child.content }}
              </component>
            </template>
          </component>
        </el-form-item>
      </div>
      <div class="search-button-dynamic">
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          @click="onSubmit"
        >查询
        </el-button>
        <el-button
          size="small"
          @click="onReset"
        >重置
        </el-button>
      </div>
    </div>
  </el-form>
</template>

<script>
import { componentMap } from '@/components/DynamicTableForm/Form/componentMap.js'
import {
  fieldsValidator,
  getComponentEvents,
  getDefaultPlaceholder
} from '@/components/DynamicTableForm/Form/fieldsValidator.js'

export default {
  name: 'DynamicForm',
  props: {
    dialogActions: {
      type: Object,
      default: () => ({})
    },
    fields: {
      type: Array,
      required: true,
      validator: value => fieldsValidator(value)
    },
    initialData: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      loading: false,
      formData: {}

    }
  },
  // 如果动态加载组件
  watch: {
    fields: {
      handler(newVal) {
        this.$nextTick(() => {
          this.initForm()
        })
      },
      immediate: true
    }
  },
  methods: {
    // 将函数挂载到 methods 中
    getComponentEvents,
    // 初始化表单
    initForm() {
      this.formData = this.fields.reduce((acc, field) => ({
        ...acc,
        [field.prop]: this.initialData[field.prop] ?? this.getDefaultValue(field.type)
      }), {})
      console.table('🚀  初始化查询参数:', this.formData, this.fields)
    },

    getComponentConfig(type) {
      return componentMap[type] || componentMap.default
    },
    getComponentChildren(field) {
      const config = componentMap[field.type]
      return config.children
        ? (typeof config.children === 'function'
          ? config.children(field.options)
          : config.children)
        : []
    },

    // 获取类型默认值
    getDefaultValue(type) {
      const typeDefaults = {
        'checkbox-group': [],
        'radio-group': 0,
        'input-number': 0,
        slider: 0,
        rate: 0,
        switch: 1,
        upload: []
      }
      return typeDefaults[type] ?? ''
    },

    getComponentProps(field) {
      const config = this.getComponentConfig(field.type)
      return {
        // 优先级顺序：用户配置 > 组件默认配置
        ...config.props, // 1. 组件默认配置
        ...field.props, // 2. 用户自定义配置
        // 特殊属性处理
        style: 'width: 100%', // 强制宽度
        placeholder: field.placeholder || getDefaultPlaceholder(field.type)
      }
    },
    // 其他核心方法...
    onReset() {
      this.$refs.form.resetFields()
      this.onSubmit()
    },
    onSubmit() {
      const params = Object.assign({}, this.formData, { page: 1 })
      this.$emit('queryList', params)
    }
  }
}
</script>
